<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>礼品藏首页</title>
    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入css首页文件 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部模块 -->
    <header>
        <!-- banner模块 -->
        <div class="banner">
            <a href="#">
                <img src="images/banner.png" alt="">
            </a>
            <!-- 信号栏模块 -->
            <div class="signal">
                <img src="images/signal.png" alt="">
            </div>
            <!-- 搜索栏模块 -->
            <div class="search-box">
                <div class="search">
                    <span class="search-icon"></span>
                    <input type="text" placeholder="关键字/商品名称">
                </div>
                <div class="msg">
                    <a href="#">
                        <span class="msg-icon"></span>
                        <span>消 息</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- 导航栏模块 -->
    <nav>
        <ul>
            <li>
                <a href="#" title="钱币">
                    <span class="nav-icon1"></span>
                    <span>钱币</span>
                </a>
            </li>
            <li>
                <a href="#" title="邮票">
                    <span class="nav-icon2"></span>
                    <span>邮票</span>
                </a>
            </li>
            <li>
                <a href="#" title="金银币">
                    <span class="nav-icon3"></span>
                    <span>金银币</span>
                </a>
            </li>
            <li>
                <a href="#" title="纪念币">
                    <span class="nav-icon4"></span>
                    <span>纪念币</span>
                </a>
            </li>
            <li>
                <a href="#" title="订单">
                    <span class="nav-icon5"></span>
                    <span>订单</span>
                </a>
            </li>
            <li>
                <a href="#" title="收藏">
                    <span class="nav-icon6"></span>
                    <span>收藏</span>
                </a>
            </li>
            <li>
                <a href="#" title="增收">
                    <span class="nav-icon7"></span>
                    <span>增收</span>
                </a>
            </li>
            <li>
                <a href="#" title="钱包">
                    <span class="nav-icon8"></span>
                    <span>钱包</span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- 广告模块 -->
    <div class="ad">
        <a href="#">
            <img src="upload/ad.png" alt="">
        </a>
    </div>

    <!-- 增收产品模块 -->
    <div class="add">
        <div class="add-hd">
            <h2>增收产品</h2>
            <a href="#">
                <span>更多商品</span>
                <i></i>
            </a>
        </div>
        <ul class="add-bd">
            <li>
                <a href="#">
                    <h3>第四套人民币</h3>
                    <span>1980年版1元 整刀</span>
                    <span>￥11288.65</span>
                    <img src="upload/add1.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <h3>第四套人民币</h3>
                    <span>1980年版5元 整刀</span>
                    <span>￥10019.21</span>
                    <img src="upload/add2.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <h3>第四套人民币</h3>
                    <span>1980年版100元 整刀</span>
                    <span>￥11288.65</span>
                    <img src="upload/add3.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <h3>第四套人民币</h3>
                    <span>1980年版50元 整刀</span>
                    <span>￥10019.21</span>
                    <img src="upload/add4.png" alt="">
                </a>
            </li>
        </ul>
    </div>

    <!-- 产品导航模块 -->
    <div class="nav-pro">
        <div class="pro-hd">
            <a href="#">钱币</a>
            <a href="#">邮票</a>
            <a href="#">金银币</a>
            <a href="#">纪念币</a>
        </div>
        <ul class="pro-bd">
            <li>
                <a href="#">
                    <img src="upload/money1.png" alt="">
                    <h5>建国50周年纪念钞单张</h5>
                    <span>6个月增收产品</span>
                    <span>￥19892.21<i></i></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/money2.png" alt="">
                    <h5>建国50周年纪念钞单张</h5>
                    <span>6个月增收产品</span>
                    <span>￥19892.21<i></i></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/money3.png" alt="">
                    <h5>建国50周年纪念钞单张</h5>
                    <span>6个月增收产品</span>
                    <span>￥19892.21<i></i></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/money4.png" alt="">
                    <h5>建国50周年纪念钞单张</h5>
                    <span>6个月增收产品</span>
                    <span>￥19892.21<i></i></span>
                </a>
            </li>
        </ul>
    </div>

    <!-- 底部选项卡模块 -->
    <footer>
        <a href="#">
            <span class="footer-icon1"></span>
            <span>首页</span>
        </a>
        <a href="#">
            <span class="footer-icon2"></span>
            <span>大健康</span>
        </a>
        <a href="#">
            <span class="footer-icon3"></span>
            <span>股权通证</span>
        </a>
        <a href="#">
            <span class="footer-icon4"></span>
            <span>我的</span>
        </a>
    </footer>

</body>

</html>